<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="../styles/global.css">
    <link rel="stylesheet" href="css/unis.css">
    <link rel="stylesheet" href="css/unis-fonts.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/nav.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid" >
    <div class="row bg-pearl-blue" style="padding-top: 15px;">
        <div class="col-8">
            <h2 class="primary">04. Components</h2>
            <p style="padding-left: 46px;"></p>
        </div>
        <div class="col-4" style="text-align: right; padding-top: 30px;">

        </div>
    </div>
    <div class="d-flex align-items-stretch" id="app">
        <div class="col isolation">
            <div v-for="(list,index) in datalist">
                <div class="d-flex" v-if="!list.nodispay">
                    <h2 v-html="list.moduleName"></h2>
                    <p style="margin-left: 24px;" v-html="list.explain"></p>

                </div>
                <hr v-if="!list.nodispay">
                <div>
                    <div v-for="(item,index) in list.unis" :id="item.link+index">
                        <div v-if="!item.nodispay">
                            <h4 v-html="item.listName"></h4>
                        </div>
                        <div class="btn-code" v-if="!item.noBreak">
                            <div class="code-label blue">
                                <div class="unis-arrow left "></div>
                                <div class="unis-arrow right "></div>
                            </div>
                            <input type="checkbox" class="code-input ">
                            <div class="card">
                                <div class="card-header">Example</div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col column" :class="detail.className"
                                             v-for="(detail,index) in item.list"
                                             :style="{'minHeight':detail.height,'marginTop':detail.className?'25px':'0'}">
                                            <div v-if="detail.lable" v-html="detail.lable"></div>
                                            <div :class="detail.col ? 'row' : '' " style="flex: 1" class="column"
                                                 v-if="detail.html">
                                                <div :class="detail.col" class="column" style="flex: 1">
                                                    <div v-html="detail.html"
                                                         :style="{'minHeight':detail.height,'paddingLeft':detail.left}"></div>
                                                    <div class="pre" style="flex: 1;" v-if="detail.html">
                                                        <pre>
                                                            <code class="lang-javascript html code"
                                                                  v-html="detail.html">
                                                            </code>
                                                        </pre>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 150px;" id="bottid"></div>
        </div>

        <div class="col leftnavHeight" style="display: none">
            <div id="navHeight" class="nav">
                <nav class="nav-wrap navFix leftNavFix" id="nav-wrap">
                    <div v-for="(list,index) in datalist">
                        <div class="nav-Form" style="cursor: pointer">
                            <i class="unis-tian unis-icon"
                               style="margin-right: 15px; "></i>
                            <span v-html="list.moduleName"></span>
                        </div>
                        <ul class="clearfix" style="overflow: hidden; ">
                            <li v-for="(item,index) in list.unis">
                                <a :href="'#'+ item.link +index" v-html="item.listName"></a>
                            </li>
                        </ul>
                    </div>
                </nav>

            </div>
        </div>

    </div>

</div>
<script src="../js/beautify2.js" type="text/javascript"></script>
<script src="../js/beautify-css2.js" type="text/javascript"></script>
<script src="../js/beautify-html2.js" type="text/javascript"></script>
<script src="../js/highlight.min.js"></script>
<script type="text/javascript">
    Vue.config.debug = true;
    app = new Vue({
        el: "#app",
        data: {
            datalist: [
                {
                    moduleName: 'Buttons',
                    explain: ' ',
                    unis: [
                        {
                            listName: 'Primary',
                            link: 'Buttons',
                            list: [
                                {
                                    lable: '',
                                    html: ' <button class="unis-btn unis-btn-primary">Inactive</button>'
                                }, {
                                    lable: '',
                                    html: ' <button class="unis-btn unis-btn-primary" Disabled>Disabled</button>'
                                }, {
                                    lable: '&nbsp;'
                                }, {
                                    lable: '&nbsp;'
                                },
                            ]

                        },
                        {
                            listName: 'Secondary',
                            link: 'Buttons',
                            list: [
                                {
                                    lable: '',
                                    html: ' <button class="unis-btn unis-btn-secondary">Inactive</button>'
                                }, {
                                    lable: '',
                                    html: ' <button class="unis-btn unis-btn-secondary"  Disabled>Disabled</button>'
                                }, {
                                    lable: '&nbsp;'
                                }, {
                                    lable: '&nbsp;'
                                },
                            ]

                        },
                        {
                            listName: 'Tertiary',
                            link: 'Buttons',
                            list: [
                                {
                                    html: ' <button class="unis-btn unis-btn-tertiary">Inactive</button>'
                                }, {
                                    html: ' <button class="unis-btn unis-btn-tertiary"  Disabled>Disabled</button>'
                                }, {
                                    lable: '&nbsp;'
                                }, {
                                    lable: '&nbsp;'
                                },
                            ]

                        },
                        {
                            listName: 'Ghost',
                            link: 'Buttons',
                            list: [
                                {
                                    html: ' <button class="unis-btn unis-btn-ghost">Inactive</button>'
                                }, {
                                    html: ' <button class="unis-btn unis-btn-ghost"  Disabled>Disabled</button>'
                                }, {
                                    lable: '&nbsp;'
                                }, {
                                    lable: '&nbsp;'
                                },
                            ]

                        },
                        {
                            listName: 'Split',
                            link: 'Buttons',
                            list: [
                                {
                                    html: ' <button class="unis-btn unis-btn-split" >Inactive</button>'
                                },

                                {
                                    height: '150px',
                                    left: "0",
                                    html: ' <button class="unis-btn unis-btn-split">' +
                                    'Active ' +
                                    '<ul>' +
                                    '<li>Option 1</li>' +
                                    '<li>Option 2</li>' +
                                    '</ul>' +
                                    '</button>'
                                }, {
                                    html: ' <button class="unis-btn unis-btn-split"  Disabled>Disabled</button>'
                                }, {
                                    lable: '&nbsp;'
                                }
                            ]

                        },
                        {
                            listName: 'With Icons 1',
                            link: 'Buttons',
                            list: [
                                {

                                    html: '<button class="unis-btn-icons unis-icon">' +
                                    '<div class="icon-box ">' +
                                    '<span class="unis-filter">' +
                                    '<span class="path1"></span>' +
                                    '<span class="path2"></span>' +
                                    '<span class="path3"></span>' +
                                    '<span class="path4"></span>' +
                                    '<span class="path5"></span>' +
                                    '<span class="path6"></span>' +
                                    '</span>' +
                                    '</div>' +
                                    'Filter' +
                                    '</button>'
                                },
                                {

                                    html: '<div class="icon-box unis-icon">' +
                                    '<i class="unis-plus accents-bg" ></i>' +
                                    '</div>' +
                                    '<div class="icon-box unis-icon">' +
                                    '<i class="unis-plus accents-bg-50 blue" ></i>' +
                                    '</div>'
                                },
                                {

                                    html: '<div class="icon-box unis-icon">' +
                                    '<i class="unis-field  gray border-1 white-bg" ></i>' +
                                    '<i class="unis-tian  gray border-1" ></i>' +
                                    '</div>'
                                }, {

                                    html: '<div class="icon-box unis-icon">' +
                                    '<i class="unis-trash gray border-1 white-bg" ></i>' +
                                    '</div>' +
                                    '<div class="icon-box unis-icon">' +
                                    '<span class="unis-printer gray border-1 white-bg" >' +
                                    '<span class="path1"></span>' +
                                    '<span class="path2"></span>' +
                                    '<span class="path3"></span>' +
                                    '<span class="path4"></span>' +
                                    '<span class="path5"></span>' +
                                    '</span>' +
                                    '</div>'
                                }
                            ]

                        },

                        {
                            listName: 'With Icons 2',
                            nodispay: true,
                            link: '',
                            list: [

                                {

                                    html: '<div class="icon-box unis-icon">' +
                                    '<i class="unis-field  gray border-1 " ></i>' +
                                    '<i class="unis-date  gray border-1" ></i>' +
                                    '<i class="unis-analytics  gray border-1 white-bg" ></i>' +
                                    '</div>'
                                }, {
                                    html: ''
                                }, {
                                    html: ''
                                }, {
                                    html: ''
                                }
                            ]

                        },
                        {
                            listName: 'Button Sizes 1',
                            link: 'Buttons',
                            list: [
                                {

                                    lable: "Extra Small",
                                    html: ' <button class="unis-btn unis-btn-primary unis-ex-sm" >Add</button>'
                                }, {

                                    lable: "Small",
                                    html: ' <button class="unis-btn unis-btn-primary unis-sm" >Save</button>'
                                }, {

                                    lable: "Medium",
                                    height: "",
                                    html: ' <button class="unis-btn unis-btn-primary" >Export</button>'
                                }, {

                                    lable: "Large (width:100%)",
                                    height: "",
                                    html: ' <button class="unis-btn unis-btn-primary unis-lag" >Continue</button>'
                                }
                            ]

                        },
                        {
                            listName: 'Button Group 2',
                            link: 'Buttons',
                            list: [
                                {
                                    lable: "Extra Small Group",

                                    html: '<div class="unis-btn-group">' +
                                    '<button class="unis-btn active unis-btn-primary unis-ex-sm" >Export</button>' +
                                    '<button class="unis-btn unis-btn-primary unis-ex-sm" >Export</button>' +
                                    '<button class="unis-btn unis-btn-primary unis-ex-sm" >Export</button>' +
                                    '</div>'
                                },
                            ]

                        },
                        {
                            listName: 'Button Group 3',
                            link: 'Buttons',
                            nodispay: true,
                            list: [
                                {
                                    lable: "Small Group",

                                    html: '<div class="unis-btn-group">' +
                                    '<button class="unis-btn active unis-btn-primary unis-sm" >Export</button>' +
                                    '<button class="unis-btn unis-btn-primary unis-sm" >Export</button>' +
                                    '<button class="unis-btn unis-btn-primary unis-sm" >Export</button>' +
                                    '</div>'
                                }
                            ]

                        },
                        {
                            listName: 'Button Group 4',
                            link: 'button',
                            nodispay: true,
                            list: [
                                {
                                    lable: "Medium Group",

                                    html: '<div class="unis-btn-group">' +
                                    '<button class="unis-btn active unis-btn-primary " >Export</button>' +
                                    '<button class="unis-btn unis-btn-primary " >Export</button>' +
                                    '<button class="unis-btn unis-btn-primary " >Export</button>' +
                                    '</div>'
                                }
                            ]

                        }
                    ]

                },
                {
                    moduleName: 'Used For Forms. ',
                    nodispay: true,
                    explain: '',
                    unis: [
                        {
                            listName: 'Input Fields',
                            link: 'InputNotesComponents',
                            explain: 'Input Fields Used For Long Forms When Background Is Set To #FCFDFF',
                            list: [
                                {
                                    lable: '',

                                    height: '',
                                    html: ' <label>Inactive</label>' +
                                    ' <input class="unis-put" placeholder="Inactive">'
                                },
                                {
                                    lable: '',

                                    height: '',
                                    html: ' <label>Display</label>' +
                                    ' <input class="unis-put  display" placeholder="Inactive" value="Inactive" >'
                                },
                                {
                                    lable: '',

                                    height: '',
                                    html: ' <label>Disabled</label>' +
                                    ' <input class="unis-put" placeholder="Inactive" value="Inactive"  Disabled>'
                                },
                                {
                                    lable: '',

                                    height: '',
                                    html: ' <label>Character Count</label>' +
                                    '<div class="unis-agt">' +
                                    '<input class="unis-put" placeholder="Inactive" value="Inactive" >' +
                                    '<div class="al-r" style="margin-top: 8px">10/50</div>' +
                                    '</div>'
                                },
                            ]
                        },
                        {
                            listName: 'Input Fields 2',
                            nodispay: true,
                            link: 'InputNotesComponents',
                            explain: '',
                            list: [

                                {
                                    lable: '',

                                    height: '',
                                    html: ' <label>Error</label>' +
                                    '<div class="unis-agt  error">' +
                                    '<input class="unis-put" placeholder="Inactive" value="Inactive" >' +
                                    '<div style="margin-top: 8px;">Error Message If Requirement Not Met</div>' +
                                    '<div class="warn"></div>' +
                                    '</div>'
                                },
                                {
                                    lable: '',

                                    height: '',
                                    html: ' <label>Warning</label>' +
                                    '<div class="unis-agt  warning">' +
                                    '<input class="unis-put" placeholder="Inactive" value="Inactive" >' +
                                    '<div style="margin-top: 8px;">Error Message If Requirement Not Met</div>' +
                                    '<div class="warn"></div>' +
                                    '</div>'
                                },
                                {
                                    lable: '',
                                    col: 'col-12',
                                    height: '',
                                    html: ' <label>Tooltip Bottom</label>' +
                                    '<div class="unis-agt uins-tooltips">' +
                                    '<input class="unis-put" placeholder="Inactive" value="Inactive" >' +
                                    '<div class="warn"></div>' +
                                    '<div class="totip  left">Tooltip Info About This Field Will Appear Below Via Hover.</div>' +
                                    '</div>'
                                },
                                {
                                    lable: '',
                                    col: 'col-12',
                                    height: '',
                                    html: ' <label>Tooltip Right</label>' +
                                    '<div class="unis-agt uins-tooltips">' +
                                    '<input class="unis-put" placeholder="Inactive" value="Inactive" >' +
                                    '<div class="warn"></div>' +
                                    '<div class="totip  right">Or To The Right! Just Can’T Cover The Input Label.</div>' +
                                    '</div>'
                                },
                            ]
                        },

	                    {
		                    listName: 'Input Line',
		                    link: 'InputNotesComponents',
		                    explain: 'Input fields used for short forms when background is set to white or placed on a card layout.(eg. Onboarding Wizard, FMS Inquiry)',
		                    list: [
			                    {
				                    lable: '',
				                    height: '',
				                    html: ' <label>Inactive</label>' +
				                    ' <input class="unis-put unis-line-put" placeholder="Helper Text">'
			                    },
			                    {
				                    lable: '',
				                    height: '',
				                    html: ' <label>Inactive</label>' +
				                    ' <input class="unis-put unis-line-put" placeholder="Helper Text" value="Input text">'
			                    },
			                    {
				                    lable: '',
				                    height: '',
				                    html: ' <label>Inactive</label>' +
				                    '<div class="unis-agt">' +
				                    '<input class="unis-put unis-line-put" placeholder="Inactive" value="Inactive" >' +
				                    '<div class=" al-r" style="margin-top: 8px">10/50</div>' +
				                    '</div>'
			                    },

		                    ]
	                    },
                        {
                            listName: 'Input Line2',
                            link: 'InputNotesComponents',
                            nodispay: true,
                            explain: '',
                            list: [
                                {
                                    lable: '',
                                    height: '',
                                    html: ' <label>Error</label>' +
                                    '<div class="unis-agt  error">' +
                                    '<input class="unis-put unis-line-put" placeholder="Inactive" value="Inactive" >' +
                                    '<div style="margin-top: 8px;">Error Message If Requirement Not Met</div>' +
                                    '<div class="warn"></div>' +
                                    '</div>'
                                },
                                {
                                    lable: '',
                                    height: '',
                                    html: ' <label>Warning</label>' +
                                    '<div class="unis-agt  warning">' +
                                    '<input class="unis-put unis-line-put" placeholder="Inactive" value="Inactive" >' +
                                    '<div style="margin-top: 8px;">Error Message If Requirement Not Met</div>' +
                                    '<div class="warn"></div>' +
                                    '</div>'
                                },
                                {
                                    lable: '',
                                    height: '',
                                    html: ' <label>Tooltip Bottom</label>' +
                                    '<div class="unis-agt uins-tooltips">' +
                                    '<input class="unis-put unis-line-put" placeholder="Inactive" value="Inactive" >' +
                                    '<div class="warn"></div>' +
                                    '<div class="totip left">Or To The Right! Just Can’T Cover The Input Label.</div>' +
                                    '</div>'
                                },
                                {
                                    lable: '',
                                    height: '',
                                    html: ' <label>Tooltip Right</label>' +
                                    '<div class="unis-agt uins-tooltips">' +
                                    '<input class="unis-put unis-line-put" placeholder="Inactive" value="Inactive" >' +
                                    '<div class="warn"></div>' +
                                    '<div class="totip right">Or To The Right! Just Can’T Cover The Input Label.</div>' +
                                    '</div>'
                                },

                            ]
                        },
                        {
                            listName: 'Notes',
                            link: 'InputNotesComponents',
                            explain: '',
                            list: [
                                {
                                    lable: '',
                                    height: '',
                                    html: ' <label>Notes</label>' +
                                    '<textarea class="unis-textarea"></textarea>'
                                },

                            ]
                        }
                    ]
                },
                {
                    moduleName: 'Selects Components',
                    nodispay: true,
                    explain: '',
                    unis: [
                        {
                            listName: 'Dropdown',
                            link: 'SelectsComponents',
                            explain: '',
                            list: [
                                {
                                    lable: '',
                                    html: ' <label>Default</label>' +
                                    '<button class="unis-select" >' +
                                    '<input type="button" value="Select">' +
                                    '<ul>' +
                                    '<li>Option 1</li>' +
                                    '<li>Option 2</li>' +
                                    ' <li>Option 3</li>' +
                                    '</ul>' +
                                    '</button>'
                                },
                                {
                                    lable: '',
                                    height: '200px',
                                    html: ' <label>Select-xs</label>' +
                                    '<button class="unis-select unis-select-xs" >' +
                                    '<input type="button" value="Select">' +
                                    '</button>'
                                },
                                {
                                    lable: '',
                                    height: '200px',
                                    html: ' <label>Select Small</label>' +
                                    '<button class="unis-select unis-select-small" >' +
                                    '<input type="button" value="Select">' +
                                    '<ul>' +
                                    '<li>Option 1</li>' +
                                    '<li>Option 2</li>' +
                                    ' <li>Option 3</li>' +
                                    '</ul>' +
                                    '</button>'
                                },
                            ]
                        },
                        {
                            listName: 'Dropdown 2',
                            nodispay: true,
                            link: 'SelectsComponents',
                            explain: '',
                            list: [
                                {
                                    lable: '',
                                    height: '200px',
                                    html: ' <label>Select-Medium</label>' +
                                    '<button class="unis-select" >' +
                                    '<input type="button" value="Select">' +
                                    '<ul>' +
                                    '<li>Option 1</li>' +
                                    '<li>Option 2</li>' +
                                    ' <li>Option 3</li>' +
                                    '</ul>' +
                                    '</button>'
                                },
                                {
                                    lable: '',
                                    height: '200px',
                                    html: ' <label>Multi-Select</label>' +
                                    '<button class="unis-select multi" >' +
                                    '<input type="text" placeholder="Enter A Keyword..." >' +
                                    '</button>'
                                },
                                {
                                    lable: '',
                                    col: 'col-12',
                                    height: '200px',
                                    html: ' <label>Multi-Select</label>' +
                                    '<button class="unis-select" >' +
                                    '<span>Value 2 <i class="cross"><i class="unis-cross"></i></i></span>' +
                                    '<span>Value 2 <i class="cross"><i class="unis-cross"></i></i></span>' +
                                    '<input type="text"   placeholder="Enter A Keyword...">' +
                                    '<ul>' +
                                    '<li>Option 1</li>' +
                                    '<li>Option 2</li>' +
                                    ' <li>Option 3</li>' +
                                    '</ul>' +
                                    '</button>'
                                },
                            ]
                        },
                        {
                            listName: 'Dropdown Line 1',
                            link: 'SelectsComponents',
                            explain: '',
                            list: [
                                {
                                    lable: '',
                                    height: '200px',
                                    html: ' <label>Default</label>' +
                                    '<button class="unis-select unis-line-select" >' +
                                    '<input type="button" value="Select">' +
                                    '<ul>' +
                                    '<li>Option 1</li>' +
                                    '<li>Option 2</li>' +
                                    ' <li>Option 3</li>' +
                                    '</ul>' +
                                    '</button>'
                                },
                                {
                                    lable: '',
                                    height: '200px',
                                    html: ' <label>Select-xs</label>' +
                                    '<button class="unis-select unis-line-select unis-select-xs " >' +
                                    '<input type="button" value="Select">' +
                                    '</button>'
                                },
                                {
                                    lable: '',
                                    height: '200px',
                                    html: ' <label>Select Small</label>' +
                                    '<button class="unis-select unis-line-select unis-select-small" >' +
                                    '<input type="button" value="Select">' +
                                    '</button>'
                                },
                            ]
                        },
                        {
                            listName: 'Dropdown Line 2',
                            link: 'SelectsComponents',
                            nodispay: true,
                            explain: '',
                            list: [


                                {
                                    lable: '',
                                    height: '200px',
                                    html: ' <label>Multi-Select</label>' +
                                    '<button class="unis-select unis-line-select multi" >' +
                                    '<input type="text" placeholder="Enter A Keyword..." >' +
                                    '</button>'
                                },
                                {
                                    lable: '',
                                    col: 'col-12',
                                    height: '200px',
                                    html: ' <label>Multi-Select</label>' +
                                    '<button class="unis-select unis-line-select multi" >' +
                                    '<span>Value2<i class="unis-cross"></i></span>' +
                                    '<span>Value2<i class="unis-cross"></i></span>' +
                                    '<span>Value2<i class="unis-cross"></i></span>' +
                                    '<span>Value2<i class="unis-cross"></i></span>' +
                                    '<input type="text"   placeholder="Enter A Keyword...">' +
                                    '<ul>' +
                                    '<li>Option 1</li>' +
                                    '<li>Option 2</li>' +
                                    '</ul>' +
                                    '</button>'
                                },
                            ]
                        },
                    ]
                },
                {
                    moduleName: 'Form Components',
                    explain: '',
                    nodispay: true,
                    unis: [
                        {
                            listName: 'Steps',
                            link: 'FormComponents',
                            explain: '',
                            list: [
                                {
                                    lable: '',
                                    html: '<div class="unis-steps current">' +
                                    '<span>1</span>' +
                                    'Current Step' +
                                    '</div>'
                                },
                                {
                                    lable: '',
                                    html: '<div class="unis-steps completed">' +
                                    '<span>1</span>' +
                                    'Completed Step' +
                                    '</div>'
                                },
                                {
                                    lable: '',
                                    html: '<div class="unis-steps finish ">' +
                                    '<span>1</span>' +
                                    'Completed Form' +
                                    '</div>'
                                },
                                {
                                    lable: '',
                                    html: '<div class="unis-steps incomplete">' +
                                    '<span>1</span>' +
                                    'Incomplete Step' +
                                    '</div>'
                                },
                            ]
                        },
                        {
                            listName: 'Radio Buttons',
                            link: 'FormComponents',
                            explain: '',
                            list: [
                                {
                                    lable: '',
                                    html: ' <label class="unis-radio">' +
                                    '<input type="radio" checked name="radio1" value="1"/>' +
                                    '<span class="unis-radio-style"></span>' +
                                    '<span>Default</span>' +
                                    '</label>'
                                },
                                {
                                    lable: '',
                                    html: ' <label class="unis-radio">' +
                                    '<input type="radio" name="radio1" checked/>' +
                                    '<span class="unis-radio-style"></span>' +
                                    '<span>Default Checked</span>' +
                                    '</label>'
                                },
                                {
                                    lable: '',
                                    html: ' <label class="unis-radio">' +
                                    '<input type="radio" name="radio1" Disabled value="3"/>' +
                                    '<span class="unis-radio-style"></span>' +
                                    '<span>Disabled</span>' +
                                    '</label>'
                                },
                                {
                                    lable: '',
                                    html: ' <label class="unis-radio">' +
                                    ' <input type="radio" name="radio3" checked Disabled value="4" />' +
                                    '<span class="unis-radio-style"></span>' +
                                    '<span >Checked & Disabled</span>' +
                                    '</label>'
                                },
                            ]
                        },
	                    {
		                    listName: 'Input Radio',
		                    link: 'FormComponents',
		                    explain: '',
		                    list: [

			                    {
				                    lable: ' ',
				                    html: '<input type="radio" class="unis-input-radio"/>' +
				                    '<label  >Default</label>'
			                    },
			                    {
				                    lable: '',
				                    html: ' <input type="radio" class="unis-input-radio"  checked  />'+
				                    '<label  >Checked</label>'
			                    },
			                    {
				                    lable: '',
				                    html: ' <input type="radio" class="unis-input-radio"  Disabled  />'+
				                    '<label  >Disabled</label>'
			                    },
			                    {
				                    lable: '',
				                    html: ' <input type="radio" class="unis-input-radio"  checked Disabled  />'+
				                    '<label  >Checked Disabled</label>'
			                    },
		                    ]
	                    },
                        {
                            listName: 'Checkbox Buttons',
                            link: 'FormComponents',
                            explain: '',
                            list: [
                                {
                                    lable: '',
                                    html: '	<div class="unis-checkbox ">' +
                                    '<input type="checkbox" name="1" id="ch1">' +
                                    '<label class="unis-checkbox-style" for="ch1"></label>' +
                                    '<span >Checked</span>' +
                                    '</div>'
                                },
                                {
                                    lable: '',
                                    html: '	<div class="unis-checkbox ">' +
                                    '<input type="checkbox" name="2" id="ch2" checked>' +
                                    '<label class="unis-checkbox-style" for="ch2"></label>' +
                                    '<span >Checked</span>' +
                                    '</div>'
                                },
                                {
                                    lable: '',
                                    html: '	<div class="unis-checkbox unis-checkbox-green">' +
                                    '<input type="checkbox" name="3" id="ch3"  Disabled>' +
                                    '<label class="unis-checkbox-style" for="ch3"></label>' +
                                    '<span >Disabled</span>' +
                                    '</div>'
                                },
                                {
                                    lable: '',
                                    html: '	<div class="unis-checkbox ">' +
                                    '<input type="checkbox" name="4" id="ch4" checked Disabled>' +
                                    '<label class="unis-checkbox-style" for="ch4"></label>' +
                                    '<span >Checked & Disabled</span>' +
                                    '</div>'
                                },
                            ]
                        },
	                    {
		                    listName: 'Input checkbox',
		                    link: 'FormComponents',
		                    explain: '',
		                    list: [

			                    {
				                    lable: ' ',
				                    html: '<input type="checkbox" class="unis-input-checkbox" name="1"/>' +
				                    '<label >Default</label>'
			                    },
			                    {
				                    lable: '',
				                    html: ' <input type="checkbox" class="unis-input-checkbox"  name="1" checked  />'+
				                    '<label  >Checked</label>'
			                    },
			                    {
				                    lable: '',
				                    html: ' <input type="checkbox" class="unis-input-checkbox"  name="1" Disabled  />'+
				                    '<label  >Disabled</label>'
			                    },
			                    {
				                    lable: '',
				                    html: ' <input type="checkbox" class="unis-input-checkbox"  name="1" checked Disabled  />'+
				                    '<label  >Checked Disabled</label>'
			                    },
		                    ]
	                    },
                        {
                            listName: 'Switch Buttons',
                            link: 'FormComponents',
                            explain: '',
                            list: [
                                {
                                    lable: '',
                                    html: '<label class="unis-switch">' +
                                    ' <input type="checkbox" name="switch"  >' +
                                    '<span class="unis-switch-style"></span>' +
                                    '<span >Default switch</span>' +
                                    '</label>'
                                },
                                {
                                    lable: '',
                                    html: '<label class="unis-switch">' +
                                    ' <input type="checkbox" name="switch" checked >' +
                                    '<span class="unis-switch-style"></span>' +
                                    '<span >Default switch</span>' +
                                    '</label>'
                                },
                                {
                                    lable: '',
                                    html: '<label class="unis-switch">' +
                                    ' <input type="checkbox" name="switch" Disabled >' +
                                    '<span class="unis-switch-style"></span>' +
                                    '<span >Disabled</span>' +
                                    '</label>'
                                },
                                {
                                    lable: '',
                                    html: '<label class="unis-switch">' +
                                    ' <input type="checkbox" name="switch" checked Disabled >' +
                                    '<span class="unis-switch-style"></span>' +
                                    '<span >Checked & Disabled</span>' +
                                    '</label>'
                                },
                            ]
                        },
                        {
                            listName: 'Search Dropdown',
                            link: 'FormComponents',
                            explain: '',
                            list: [
                                {
                                    lable: '',
                                    html: '<label>Focused/Typing</label>' +
                                    '<button class="unis-search-down" >' +
                                    '<input type="text" placeholder="Enter A Keyword...">' +
                                    '<i class="unis-seek unis-icon"></i>' +
                                    '<ul>' +
                                    '<li>Option 1</li>' +
                                    '<li>Option 2</li>' +
                                    '</ul>' +
                                    '</button>'
                                },
                                {
                                    lable: '',
                                    height: '150px',
                                    html: '<label>Focused/Typing</label>' +
                                    '<button class="unis-search-down multi" >' +
                                    '<input type="text" placeholder="Enter A Keyword...">' +
                                    '<i class="unis-seek unis-icon"></i>' +
                                    '<ul>' +
                                    '<li>Option 1</li>' +
                                    '<li>Option 2</li>' +
                                    '</ul>' +
                                    '</button>'
                                },

                            ]
                        },
                    ]
                },
                {
                    moduleName: 'Other Components',
                    explain: '',
                    nodispay: true,
                    unis: [
                        {
                            listName: 'Amount, Date, Time,Weight',
                            link: 'OtherComponents',
                            explain: '',
                            list: [
                                {
                                    name: 'Amount',
                                    html: ' <label>Amount</label>' +
                                    '<div class="unis-functional-box">' +
                                    '<i class="unis-dollar unis-icon"></i>' +
                                    '<span>00.00</span>' +
                                    '</div>'
                                }, {
                                    name: 'Date',
                                    html: ' <label>Date</label>' +
                                    '<div class="unis-functional-box">' +
                                    '<span>MM/DD/YY</span>' +
                                    '<i class="unis-date unis-icon"></i>' +
                                    '</div>'
                                }, {
                                    name: 'Time',
                                    html: ' <label>Time</label>' +
                                    '<div class="unis-functional-box">' +
                                    '<span>12:00 AM</span>' +
                                    '<i class="unis-time unis-icon"></i>' +
                                    '</div>'
                                }, {
                                    name: 'Weight',
                                    html: ' <label>Weight</label>' +
                                    '<div class="unis-functional-box">' +
                                    '<span></span>' +
                                    '<span>Lb</span>' +
                                    '</div>'
                                }
                            ]
                        },
                        {
                            listName: 'Single File Uploader 1 ',
                            link: 'OtherComponents',
                            explain: '',
                            list: [
                                {
                                    lable: '&nbsp; ',
                                    html: '<div class="unis-uploader">' +
                                    '<input type="text" placeholder="Choose File">' +
                                    '<span>Browse' +
                                    '<input type="file">' +
                                    '</span>' +
                                    '<input type="button" value="Upload">' +
                                    '</div>'
                                },
                                {
                                    lable: '&nbsp; ',
                                    html: '<div class="unis-uploader long">' +
                                    '<input type="text" placeholder="Choose File">' +
                                    '<span>Browse' +
                                    '<input type="file">' +
                                    '</span>' +
                                    '<input type="button" value="Upload">' +
                                    '</div>'
                                }
                            ]
                        },
                        {
                            listName: 'Multi-File Uploader 1 ',
                            link: 'OtherComponents',
                            explain: '',
                            list: [
                                {
                                    lable: 'Multi-File Uploader ',
                                    html: '<div class="unis-uploading">' +
                                    '<input type="file">' +
                                    '<i class="unis-cloud unis-icon">' +
                                    '</i>' +
                                    'Drop and drop files here or ' +
                                    '<span>Browse</span>' +
                                    '</div>'
                                },
                                {
                                    lable: 'Uploading State Error',
                                    html: '<div class="unis-uploading-state">' +
                                    '<div class="details error">' +
                                    '<div class="mation">' +
                                    '<input type="text"  value="filename_uploaded.ext">' +
                                    '</div>' +
                                    'Failed' +
                                    '</div>' +
                                    '<i class="unis-cross">' +
                                    '<input type="button">' +
                                    '</i>' +
                                    '<input type="button" value="Retry">' +
                                    '</div>'
                                },

                            ],
                        },
                        {
                            listName: 'Multi-File Uploader 2',
                            link: 'OtherComponents',
                            nodispay: true,
                            explain: '',
                            list: [

                                {
                                    lable: 'Uploading State ',
                                    html: '<div class="unis-uploading-state">' +
                                    '<div class="details">' +
                                    '<div class="mation">' +
                                    '<div class="progress" style="width: 60"></div>' +
                                    '<input type="text"  value="filename_uploaded.ext">' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>'
                                },
                                {
                                    lable: 'Uploading State  Success',
                                    html: '<div class="unis-uploading-state">' +
                                    '<div class="details ">' +
                                    '<div class="mation">' +
                                    '<input type="text"  value="filename_uploaded.ext">' +
                                    '</div>' +
                                    '<span>122.6kB</span>' +
                                    '</div>' +
                                    '<i class="unis-cross">' +
                                    '<input type="button">' +
                                    '</i>' +
                                    '</div>'
                                }
                            ],
                        },
                        {
                            listName: 'Segmented Control Input',
                            link: 'OtherComponents',
                            explain: '',
                            list: [
                                {
                                    lable: 'Input Type="button" ',
                                    html: '<div class="unis-adj">' +
                                    '<input type="button" class="active" value="Option 1">' +
                                    '<input type="button" value="Option 2">' +
                                    '<input type="button" value="Option 1">' +
                                    '</div>'
                                }
                            ],
                        },
                        {
                            listName: 'Segmented Control A',
                            link: 'OtherComponents',
                            explain: '',
                            nodispay: true,
                            list: [
                                {
                                    lable: ' a ',
                                    html: '<div class="unis-adj">' +
                                    '<a href="" class="active">Option 1</a>' +
                                    '<a href="">Option 2</a>' +
                                    '<a href="">Option 3</a>' +
                                    '</div>'
                                }
                            ],
                        },
                        {
                            listName: 'Segmented Control Button',
                            nodispay: true,
                            link: 'OtherComponents',
                            list: [
                                {
                                    lable: 'button',
                                    html: '<div class="unis-adj">' +
                                    '<button href="" class="active">Option 1</button>' +
                                    '<button href="">Option 2</button>' +
                                    '<button href="">Option 3</button>' +
                                    '</div>'
                                }
                            ]
                        },
                        {
                            listName: 'Segmented Control Li',
                            link: 'OtherComponents',
                            explain: '',
                            nodispay: true,
                            list: [
                                {
                                    lable: 'li',
                                    html: '<ul class="unis-adj">' +
                                    '<li href="" class="active">Option 1</li>' +
                                    '<li href="">Option 2</li>' +
                                    '<li href="">Option 3</li>' +
                                    '</ul>'
                                },
                            ],
                        },
                        {
                            listName: 'Slider',
                            link: 'OtherComponents',
                            explain: '',
                            list: [
                                {
                                    lable: 'Default ',
                                    html: '<div class="unis-slider">' +
                                    '<input type="button" class="slider-dot">' +
                                    '<div class="slider-bg"></div>' +
                                    '<div class="slider-at"></div>' +
                                    '</div>'
                                },
                                {
                                    lable: '&nbsp; ',
                                    html: '<div class="unis-slider" >' +
                                    '<input type="button" class="slider-dot" Disabled>' +
                                    '<div class="slider-bg"></div>' +
                                    '<div class="slider-at"></div>' +
                                    '</div>'
                                }
                            ],
                        },
                        {
                            listName: 'Labels',
                            link: 'OtherComponents',
                            explain: '',
                            list: [
                                {
                                    lable: ' ',
                                    html: '<div class="unis-labels solid">' +
                                    'NEW' +
                                    '</div>'
                                },
                                {
                                    lable: ' ',
                                    html: '<div class="unis-labels border-blue">' +
                                    'OPEN' +
                                    '</div>'
                                },
                                {
                                    lable: ' ',
                                    html: '<div class="unis-labels border-yellow">' +
                                    'IN PROGRESS' +
                                    '</div>'
                                },
                                {
                                    lable: ' ',
                                    html: '<div class="unis-labels border-green">' +
                                    'APPROVED' +
                                    '</div>'
                                },
                                {
                                    lable: ' ',
                                    html: '<div class="unis-labels border-grey">' +
                                    'APPOINTMENT MADE' +
                                    '</div>'
                                },
                                {
                                    lable: ' ',
                                    html: '<div class="unis-labels border-red">' +
                                    'REJECTED' +
                                    '</div>'
                                },
                                {
                                    lable: ' ',
                                    html: '<div class="unis-labels border-red">' +
                                    'CANCELLED' +
                                    '</div>'
                                },
                                {
                                    lable: ' ',
                                    html: '<div class="unis-labels border-darkgray">' +
                                    'CLOSED' +
                                    '</div>'
                                }
                            ],
                        },
                        {
                            listName: 'tags',
                            link: 'OtherComponents',
                            explain: '',
                            list: [
                                {
                                    lable: ' &nbsp;',
                                    html: '<div class="d-flex section flex-wrap "> ' +
                                    '<div class="unis-tags accents-bg-50 blue">Column One' +
                                    '<i class="unis-cross accents-bg white"></i>' +
                                    '</div>' +
                                    '<div class="unis-tags accents-bg-50 blue">Column One' +
                                    '<i class="unis-cross accents-bg white"></i>' +
                                    '</div>' +
                                    '</div>'
                                }
                            ],
                        },
                        {
                            listName: 'Stepper',
                            link: 'OtherComponents',
                            explain: '',
                            list: [
                                {
                                    lable: ' ',
                                    html: '<div class="unis-stepper">' +
                                    '<button Disabled><i class="minus" ></i></button>' +
                                    '<span>0</span>' +
                                    '<button><i class="unis-plus unis-icon"></i></button>' +
                                    '</div>'
                                }, {
                                    lable: ' ',
                                    html: '<div class="unis-stepper">' +
                                    '<button ><i class="minus" ></i></button>' +
                                    '<span>2</span>' +
                                    '<button><i class="unis-plus unis-icon"></i></button>' +
                                    '</div>'
                                }, {
                                    lable: ' ',
                                    html: '<div class="unis-stepper">' +
                                    '<button ><i class="minus" ></i></button>' +
                                    '<span>8</span>' +
                                    '<button Disabled><i class="unis-plus unis-icon"></i></button>' +
                                    '</div>'
                                }, {
                                    lable: ' ',
                                    html: '<div class="unis-stepper">' +
                                    '<button ><i class="minus" ></i></button>' +
                                    '<span>128</span>' +
                                    '<button Disabled><i class="unis-plus unis-icon"></i></button>' +
                                    '</div>'
                                }
                            ],
                        },
                        {
                            listName: 'Page',
                            link: 'OtherComponents',
                            explain: '',
                            list: [
                                {
                                    lable: ' &nbsp;',
                                    html: '<div class="unis-stepper">' +
                                    'Page' +
                                    '<div class="input-box">' +
                                    '<span> 1</span>' +
                                    '<input type="text" value="1">' +
                                    '</div>' +
                                    '<button Disabled><i class="unis-arrow left" ></i></button>' +
                                    '<button><i class="unis-arrow right"></i></button>' +
                                    '</div>'
                                }, {
                                    lable: '&nbsp; ',
                                    html: '<div class="unis-stepper">' +
                                    'Page' +
                                    '<div class="input-box">' +
                                    '<span> 1 of 888</span>' +
                                    '<input type="text" value="1 of 888">' +
                                    '</div>' +
                                    '<button Disabled><i class="unis-arrow left" ></i></button>' +
                                    '<button><i class="unis-arrow right"></i></button>' +
                                    '</div>'
                                }, {
                                    lable: '&nbsp; ',
                                    html: '<div class="row">' +
                                    '<div class="unis-stepper ml-auto">' +
                                    'Page' +
                                    '<div class="input-box">' +
                                    '1 of 270' +
                                    '<input type="text" placeholder="1 of 270">' +
                                    '</div>' +
                                    '<button><i class="unis-arrow left" ></i></button>' +
                                    '<button><i class="unis-arrow right"></i></button>' +
                                    '</div>' +
                                    '</div>'
                                }, {
                                    lable: 'Error ',
                                    html: '<div class="row">' +
                                    '<div class="unis-stepper ml-auto">' +
                                    'Page' +
                                    '<div class="input-box">' +
                                    '1 of 888' +
                                    '<input type="text" value="1 of 888" class="error">' +
                                    '</div>' +
                                    '<button Disabled><i class="unis-arrow left" ></i></button>' +
                                    '<button><i class="unis-arrow right"></i></button>' +
                                    '<div class="error">Number Must Be Between 1 And 270.</div>' +
                                    '</div>' +
                                    '</div>'
                                }
                            ],
                        },
                        {
                            listName: 'Records',
                            link: 'OtherComponents',
                            explain: '',
                            list: [
                                {
                                    lable: ' ',
                                    height: '300px',
                                    html: '<div class="unis-stepper">' +
                                    '<button class="select">' +
                                    '1-20' +
                                    '</button>' +
                                    '<span>of 5103</span>' +
                                    '<button Disabled><i class="unis-arrow left" ></i></button>' +
                                    '<button><i class="unis-arrow right"></i></button>' +
                                    '</div>'
                                }, {
                                    lable: ' ',
                                    height: '300px',
                                    html: '<div class="unis-stepper">' +
                                    '<button class="select">' +
                                    '1-20' +
                                    '<ul>' +
                                    '<li>20</li>' +
                                    '<li>50</li>' +
                                    '<li>100</li>' +
                                    '<li>500</li>' +
                                    '<li>1000</li>' +
                                    '</ul>' +
                                    '</button>' +
                                    '<span>of 5103</span>' +
                                    '<button ><i class="unis-arrow left" ></i></button>' +
                                    '<button><i class="unis-arrow right"></i></button>' +
                                    '</div>'
                                }
                            ],
                        },

                    ]
                },
            ]
        }
    })
</script>
<script>
    $(document).ready(function () {

        $(function () {
            $("#subBtn").trigger("click");
        });

        var navHeight = $("#navHeight").offset().top;
        var navFix = $("#nav-wrap");
        $(window).scroll(function () {
            if ($(this).scrollTop() > navHeight) {
                navFix.addClass("navAside");
            }
            else {
                navFix.removeClass("navAside");
            }
            $('.clearfix').css("display", "none");
            $('.active').parents("ul").css("display", "block");
        })
    });
    $('.nav-wrap').navScroll({
        mobileDropdown: false,
        mobileBreakpoint: 10,
        scrollSpy: true
    });
    $('.nav-wrap').on('click', '.nav-Form', function (e) {
        e.preventDefault();
        $(this).next("ul").slideToggle('fast');
    });

</script>

<script>
    var opts = {
        'indent_size': 4,
        'indent_char': ' ',
        'max_char': 300,
        'brace_style': 'expand',
    }
    var source = document.getElementsByClassName('code');
    for (var i = 0; i < source.length; i++) {
        source[i].innerHTML = style_html(source[i].innerHTML, opts).replace(/</g, "&lt;");
    }

</script>
<script>
    hljs.initHighlightingOnLoad();
</script>

</body>
</html>

